<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/swiper/css/swiper.min.css">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/personal.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<common-header></common-header>
	<section class="banner" style="background-image: url(./images/personal-bg.png);">
	</section>
	<section class="content">
		<section class="container">
			<user-tabs active-path="password.html"></user-tabs>
			<section class="tab-content">
				<section class="title">已参赛事</section>
				<section class="details">
					<form action="" class="password-form layui-form" @submit.prevent>
						<section class="layui-form-item">
							<label class="label">
							<span class="label-text">
								<span class="required">*</span>
								手机号
							</span>
								<span class="input-wrapper layui-input-block">
								<input autocomplete="off" :value="userInfo.phone" readonly lay-verify="phone" name="phone" type="text" placeholder="请输入11位手机号">
							</span>
							</label>
						</section>
						<section class="layui-form-item">
							<label class="label code-label">
								<input autocomplete="off" name="vcode" lay-verify="required" lay-reqtext="请输入验证码" type="text" placeholder="请输入验证码">
								<span class="get-code" @click="getCode">{{ seconds ? seconds + 's' : '获取验证码'}}</span>
							</label>
						</section>
						<section class="layui-form-item">
							<label class="label">
							<span class="label-text">
								<span class="required">*</span>
								密码
							</span>
								<span class="input-wrapper">
<!--								<input autocomplete="off" type="text" placeholder="请选择">-->
								<input autocomplete="off" name="password" lay-verify="password" type="password" placeholder="8-16字母、数字、符号">
							</span>
							</label>
						</section>
						<section class="layui-form-item">
							<label class="label">
							<span class="label-text">
								<span class="required">*</span>
								确认密码
							</span>
								<span class="input-wrapper">
								<input autocomplete="off" name="confirmPass" lay-verify="confirmPass" type="password" placeholder="8-16字母、数字、符号">
							</span>
							</label>
						</section>
						<section class="layui-form-item">
							<button type="submit" lay-submit="" lay-filter="submit">完成</button>
						</section>
					</form>
				</section>
			</section>
	</section>
	</section>
	<common-footer></common-footer>
</section>
<script src="./lib/swiper/js/swiper.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./lib/layui/layui.js"></script>
<script src="./js/vue.min.js"></script>
<script src="../js/abkj/fun_tool.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="../js/abkj/match/api/webinfo.js"></script>
<script src="../js/abkj/ext/reg.js"></script>
<script src="../js/abkj/ext/vode.js"></script>
<script src="../js/abkj/ext/news.js"></script>
<script src="./js/common.js"></script>
<script src="./components/index.js"></script>
<script>
	$(function () {
		var vm = new Vue({
			el: '.wrapper',
			data: {
				seconds: 0,
				userInfo: getUserInfo(),
				timer: null
			},
			mounted: function () {
				var vm = this
				backToLogin()
				layui.use(['form', 'layer'], function () {
					vm.form = layui.form
					vm.form.verify({
						//我们既支持上述函数式的方式，也支持下述数组的形式
						//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
						password: function (val) {
							if (!/[^\u4e00-\u9fa5]/.test(val)) return '密码必须是8-16位字母、数字、符号的组合'
							if (val.length < 8) return '密码必须是8-16位字母、数字、符号的组合'
						},
						confirmPass: function (value) {
							if (value !== $('[name=passWord]').val()) return '两次密码不一致'
						}
					});
					vm.form.on('submit(submit)', function (data) {
						var field = data.field
						chgPwd({
							pwd: field.password,
							vcode: field.vcode
						}, function () {
							layui.layer.msg('修改成功', {icon: 1})
						})
					})
				})
			},
			methods: {
				getCode: function () {
					if (this.timer) return
					var vm = this
					getSMSVCode(this.userInfo.phone, function () {
						vm.seconds = 60
						vm.timer = setInterval(function () {
							vm.seconds--
							if (vm.seconds === 0) {
								clearInterval(vm.timer)
								vm.timer = null
								callback && callback()
							}
						}, 1000)
					}, function (data) {

					})
				}
			}
		})
	})
</script>
</body>
</html>
